﻿@page "/tables/excel"

<h3>Table 表格</h3>

<h4>常用于大数据单表维护</h4>

<DemoBlock Title="绑定集合" Introduction="通过 <code>OnQueryAsync</code> 回调获得数据集合" Name="OnQuery">
    <Table TItem="Foo" ShowColumnList="true"
           IsExcel="true" IsPagination="true" PageItemsSource="@PageItemsSource"
           OnQueryAsync="@OnQueryAsync" OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" Readonly="true" />
            <TableColumn @bind-Field="@context.Education" />
            <TableColumn @bind-Field="@context.Count" Editable="false" Align="Alignment.Right" />
            <TableColumn @bind-Field="@context.Complete" Align="Alignment.Center" />
        </TableColumns>
    </Table>

    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<p class="mt-3">使用 <code>List&lt;TItem&gt;</code> 泛型集合作为数据源时，需要按照下面的步骤进行设置</p>

<p>
    <div class="code-label">1. 设置数据源</div>
    <div class="mt-2">设置 <code>Table</code> 组件的 <code>Items</code> 属性或者 <code>OnQueryAsync</code> 回调委托方法</div>
</p>

<Pre>protected override void OnInitialized()
{
    base.OnInitialized();

    Items = Foo.GenerateFoo(Localizer);
}</Pre>

<p>
    <div class="code-label">2. 处理新建逻辑</div>
    <div class="mt-2">设置 <code>OnAddAsync</code> 回调委托函数处理 <b>新建</b> 逻辑</div>
</p>

<Pre>private Task&lt;Foo&gt; OnAddAsync()
{
    // 此处代码为示例代码
    var foo = new Foo() { DateTime = DateTime.Now, Address = $"自定义地址  {DateTime.Now.Second}" };
    Items.Insert(0, foo);

    // 输出日志信息
    Trace.Log($"集合值变化通知 列: {Items.Count} - 类型: Add");
    return Task.FromResult(foo);
}</Pre>

<p>
    <div class="code-label">3. 处理删除逻辑</div>
    <div class="mt-2">设置 <code>OnDeleteAsync</code> 回调委托函数处理 <b>删除</b> 逻辑</div>
</p>

<Pre>private Task&lt;bool&gt; OnDeleteAsync(IEnumerable&lt;Foo&gt; items)
{
    // 此处代码为示例代码
    Items.RemoveAll(i => items.Contains(i));

    // 输出日志信息
    Trace.Log($"集合值变化通知 列: {Items.Count} - 类型: Delete");
    return Task.FromResult(true);
}</Pre>

<p>
    <div class="code-label">4. 处理更新逻辑</div>
    <div class="mt-2">设置 <code>OnSaveAsync</code> 回调委托函数处理单元格 <b>更新</b> 逻辑</div>
    <div class="mt-2">组件内部所有单元格编辑更新后会自动触发 <code>OnSaveAsync</code> 回调委托，参数是当前更新模型 <code>TItem</code></div>
</p>

<Pre>private Task&lt;bool&gt; OnDeleteAsync(Foo item, ItemChangedType changedType)
{
    // 此处代码为示例代码
    Trace.Log($"单元格变化通知 类: Foo - 值: 单元格");
    return Task.FromResult(true);
}</Pre>

<DemoBlock Title="通过编辑模板单独控制单元格渲染方式" Introduction="高级用法" Name="CellRender">
    <ul class="ul-demo mb-3">
        <li><code>IsFixedHeader</code> 固定表头 高度设定为 <code>Height="500px"</code></li>
        <li><code>Name</code> 不可编辑显示头像</li>
    </ul>
    <Table TItem="Foo" Items="@Items" IsBordered="true" IsExcel="true" IsFixedHeader="true" Height="500" ShowAddButton="false" ShowDeleteButton="false">
        <TableColumns>
            <TableColumn @bind-Field="@context.Name" Width="200">
                <EditTemplate Context="row">
                    <div class="d-flex disabled">
                        <div>
                            <img src="@Foo.GetAvatarUrl(row!.Id)" class="bb-avatar" />
                        </div>
                        <div class="ps-2">
                            <div>@row.Name</div>
                            <div class="bb-sub">@Foo.GetTitle(row!.Id)</div>
                        </div>
                    </div>
                </EditTemplate>
            </TableColumn>
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Education" Width="160" />
            <TableColumn @bind-Field="@context.Count" Width="160">
                <EditTemplate Context="row">
                    <div class="disabled">
                        <div>@row!.Count %</div>
                        <Progress Value="@row.Count" Color="@Foo.GetProgressColor(row.Count)"></Progress>
                    </div>
                </EditTemplate>
            </TableColumn>
            <TableColumn @bind-Field="@context.Complete" Align="Alignment.Center" Width="80" />
        </TableColumns>
    </Table>
</DemoBlock>
